
@layer layout {

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--cell-width, 250px), 1fr));
    gap: 1em;
  }

  .row {
    align-items: center;
    display: flex;
    gap: .5em;
  }

  .flex {
    display: flex;
    gap: 1em;
    > * { flex: 1 }

    &.wrap {
      flex-wrap: wrap;
      > * { flex: 1 1 var(--cell-width, 200px) }
    }
  }

  .stack {
    flex-direction: column;
    align-items: unset;
    display: flex;
    gap: 1em;
  }

  @media (width > 900px) {
    .columns {
      column-count: var(--count, 2);
      margin-block: 2em;
      column-gap: 1.5em;
      div { break-inside: avoid }
    }
  }

}
